<template>
  <div class="weekend">
    <div class="header">
      周末去哪儿
    </div>
    <ul class="list">
      <li class="list-item"
        v-for="item in weekendList"
        :key="item.id">
        <div class="item-img-wrapper">
          <img :src="item.imgUrl" :alt="item.title" class="item-img">
        </div>
        <div class="item-info">
          <p class="info-title">{{ item.title }}</p>
          <p class="info-desc">{{ item.desc }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  @import '~styles/mixins.styl'
  .header
    padding .2rem
  .list-item
    width 100%
    margin-bottom .1rem
    .item-img-wrapper
      width 100%
      height 0
      padding-bottom 37.88%
      .item-img
        width 100%
    .item-info
      background #fff
      padding .14rem .2rem .2rem .2rem
      .info-title
        font-size .28rem
        line-height .48rem
        padding-right 1.4rem
        ellipsis()
      .info-desc
        font-size .24rem
        line-height .42rem
        color $grayTextColor
        padding-right 1.4rem
        ellipsis()
</style>
